<template>
  <div class="main">
    <div class="body">
      <el-row class="loginRowClass">
        <el-col :span="24" class="loginColClass"
          ><div class="grid-username bg-purple-dark">
            <el-input
              v-model="loginBody.username"
              placeholder="请输入账户"
            ></el-input></div
        ></el-col>
      </el-row>
      <el-row class="loginRowClass">
        <el-col :span="24" class="loginColClass"
          ><div class="grid-password bg-purple-dark">
            <el-input
              v-model="loginBody.password"
              placeholder="请输入密码"
            ></el-input></div
        ></el-col>
      </el-row>
      <el-row class="loginRowClass">
        <el-col :span="24" class="loginColClass"
          ><div class="grid-button">
            <el-button type="primary" plain style="width: 100%" @click="login()"
              >登录</el-button
            >
          </div></el-col
        >
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      loginBody:{
      username: "",
      password: ""
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    if(this.$route.params.isTimeOut){
      this.$notify({
          title: '失败',
          message: "登录超时请重新登录",
          type: 'error'
        });
    }
  },
  mounted() {},
  methods: {
    login() {
      this.$axios.post("/auth/customLogin",this.loginBody).then((res)=>{
        console.log(res)
        console.log(res.data.data.access_token)
        if(res.data.code===200){
          localStorage.setItem("Authorization",res.data.data.access_token)
          this.successOpen('登陆成功')
          this.$router.push({ name: "TranslatePage" });
        }
        
      }
      )
      
    },
    successOpen(msg) {
        this.$notify({
          title: '成功',
          message: msg,
          type: 'success'
        });
      }
  },
};
</script>
<style>
.main {
  width: 100%;
  height: 100%;
  background-color: blueviolet;
  text-align: center;
  background-image: url(../image/f461160ecffad0b67aa9bd314b63c607.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.body {
  padding-top: 15%;
  height: 100%;
  width: 100%;
  text-align: center;
}
.loginRowClass {
  margin-left: 35%;
  margin-bottom: 20px;
}
.loginColClass {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.grid-username {
  width: 40%;
  border-radius: 4px;
}
.grid-password {
  width: 40%;
  border-radius: 4px;
}
.grid-button {
  width: 40%;
  border-radius: 4px;
}
</style>
